<template>
  <j-modal
    title="Online权限授权"
    :visible.sync="visible"
    :width="900"
    :maskClosable="false"
    fullscreen
    switch-fullscreen
    :okButtonProps="{style:{'display':'none'}}"
    cancelText="关闭"
    :confirmLoading="confirmLoading">
    <a-row>
      <a-col :span="12">
        <a-tabs @change="handleChangeAuthMode" :active-key="authMode">
          <a-tab-pane tab="角色授权" key="role" forceRender>
            <ls-role ref="roleRef" @select="onSelectRole"></ls-role>
          </a-tab-pane>
          <a-tab-pane tab="部门授权" key="depart" forceRender>
            <ls-depart ref="departRef" @select="onSelectDepart"></ls-depart>
          </a-tab-pane>
          <a-tab-pane tab="人员授权" key="user" forceRender>
            <ls-user ref="userRef" @select="onSelectUser"></ls-user>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :span="1"></a-col>
      <a-col :span="11">
        <a-tabs v-model="activeKey" @change="handleChangeAuthType">
          <a-tab-pane tab="字段权限" key="a" forceRender>
            <auth-column-tree :ref="rightTreeRef['a']" :cgform-id="cgformId"></auth-column-tree>
          </a-tab-pane>

          <a-tab-pane tab="按钮权限" key="b" forceRender>
            <auth-button-tree :ref="rightTreeRef['b']" :cgform-id="cgformId"></auth-button-tree>
          </a-tab-pane>

          <a-tab-pane tab="数据权限" key="c" forceRender>
            <auth-data-tree :ref="rightTreeRef['c']" :cgform-id="cgformId"></auth-data-tree>
          </a-tab-pane>
        </a-tabs>
      </a-col>

    </a-row>
  </j-modal>
</template>

<script>
  /**  o2ulDNOXGwvBRndehxW14dML+i/qxuVry2u3TXIhR9CrYEbhZi7RywQnYojV/SgC/PffdTE3WKU0/u0CXtgFzw== */
  import LsRole from './LsRole'
  import LsDepart from './LsDepart'
  import LsUser from './LsUser'

  import AuthDataTree from './setter/AuthDataTree'
  import AuthColumnTree from './setter/AuthColumnTree'
  import AuthButtonTree from './setter/AuthButtonTree'

  export default {
    name: 'AuthSetter',
    components:{
      LsRole,
      LsDepart,
      LsUser,
      AuthDataTree,
      AuthButtonTree,
      AuthColumnTree
    },
    props:{
      // 1单表 2主表 3附表
      tableType: {
        type: Number,
        required: false,
        default: 1
      },
    },
    data(){
      return {
        visible: false,
        cgformId:'',
        confirmLoading: false,
        activeKey:'a',
        authMode: 'role',
        rightTreeRef:{
          a:'fieldRef',
          b:'buttonRef',
          c:'dataref'
        },

        activeRole:'',
      }
    },
    methods:{
      show(cgformId){
        if(this.cgformId && this.cgformId!=cgformId){
          this.reset();
        }
        this.cgformId = cgformId
        this.visible = true
        this.activeKey = 'a'
      },
      reset(){
        this.$nextTick(()=>{
          this.clearLeftCurrentTabSelect();
          let activeRef = this.rightTreeRef[this.activeKey]
          this.$refs[activeRef].clear();
        })
      },
      onSelectRole(roleId){
        //选中角色事件'
        this.activeRole = roleId
        this.handleChangeAuthType(this.activeKey)
        this.clearLeftOtherTabSelect()
      },
      onSelectDepart(departid){
        //console.log('选中的部门ID',departid)
        this.activeRole = departid
        this.handleChangeAuthType(this.activeKey)
        this.clearLeftOtherTabSelect()
      },
      onSelectUser(userId){
        //选中用户事件
        this.activeRole = userId
        this.handleChangeAuthType(this.activeKey)
        this.clearLeftOtherTabSelect()
      },
      // 清空左侧选中
      clearLeftOtherTabSelect(){
        if(this.authMode == 'role'){
          this.$refs.departRef.clearSelect()
          this.$refs.userRef.clearSelect()
        }else if(this.authMode == 'depart'){
          this.$refs.roleRef.clearSelect()
          this.$refs.userRef.clearSelect()
        }else if(this.authMode == 'user'){
          this.$refs.departRef.clearSelect()
          this.$refs.roleRef.clearSelect()
        }
      },
      clearLeftCurrentTabSelect(){
        if(this.authMode == 'role'){
          this.$refs.roleRef.clearSelect()
        }else if(this.authMode == 'depart'){
          this.$refs.departRef.clearSelect()
        } else if(this.authMode == 'user'){
          this.$refs.userRef.clearSelect()
        }
      },
      // 右侧授权类型切换 事件
      handleChangeAuthType(value){
        //切换 右侧tab 如果当前选中角色信息需要加载tab内选中信息
        let activeRef = this.rightTreeRef[value]
        this.$nextTick(()=>{
          if(this.activeRole){
            this.$refs[activeRef].loadChecked(this.activeRole, this.authMode);
          }
        })
      },
      // 左侧授权方式切换 事件
      handleChangeAuthMode(tab){
        this.authMode = tab;
        this.clearLeftCurrentTabSelect()
      },
      hasDataAuth(){
        return this.tableType == 1 || this.tableType == 2
      }

    }
  }
</script>

<style scoped>

</style>
